<!--说说详情-->
<style scoped>
.contain {
  margin: 10px;
  background: #FFFFFF;
}

.header {
  height: 50px;
  margin: 3px;
}

.vux-flexbox {
  height: 100%;
}

.vux-flexbox-item {
  height: 100%;
}

.flex-demo {
  height: 100%;
}

.h-50e {
  height: 50%;
}

.sexIcon {
  height: 70%;
  vertical-align: middle
}

.slider-container {
  height: 400px !important;
}

.content {
  position: absolute;
  width: 95%;
  height: 10%;
  background: rgba(150, 150, 150, 0.7);
  z-index: 1;
  top: 53%;
}

.content-p {
  color: #FFFFFF;
  word-wrap: break-word;
}

.swiper {
  margin-top: 7px;
}

.align-middle {
  padding-left: 10px;
  text-align: left;
}

.comment {
  background: rgba(170, 170, 170, 0.5);
  position: absolute;
  width: 95%;
  top: 11.2%;
  z-index: 2;
}

.comment-font {
  font-size: 12px;
  margin-left: -10px;
  padding: 5px 10px;
}

.ok-btn {
  margin-right: -10px;
}

.popover-demo-content {
  padding: 5px 10px;
}

</style>
<template>
  <div class="contain">
    <div style="border-bottom: 1px #42B983 solid;">
      <div class="header">
        <flexbox :gutter="0">
          <flexbox-item :span="1/6">
            <div class="flex-demo">
              <img height="100%" :src='data1.pic' @click="showPersonHome"></img>
            </div>
          </flexbox-item>
          <flexbox-item :span="4/6">
            <div class="flex-demo">
              <div class="h-50e">
                <p style="display:inline">{{data1.nickName}}</p>
                <img v-if="data1.sex == 1" class="sexIcon" src='../../static/img/boy.png'></img>
                <img v-else class="sexIcon" src='../../static/img/girl.png'></img>
              </div>
              <div class="h-50e">
                <img class="sexIcon" src='../../static/img/getReward.png'></img>
                <p style="display:inline">{{hasReward}}</p>
                <img class="sexIcon" src='../../static/img/integral.png'></img>
                <p style="float: right;margin-right: 10px;">{{data2.createTime}}</p>
              </div>
            </div>
          </flexbox-item>
          <flexbox-item :span="1/6">
            <div class="flex-demo">
              <img @click="reward" height="100%" src='../../static/img/xuanshang.png'></img>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <div style="border-bottom: 1px #42B983 solid;overflow: auto;">
      <div class="swiper">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- slides -->
          <swiper-slide v-for="item in data2.list" key="item">
            <img width="100%" height="350px" :src="item" @click="clickImg"></img>
          </swiper-slide>
        </swiper>
      </div>
      <transition-group name="custom-classes-transition" enter-active-class="fadeIn" leave-active-class="fadeOut">
        <div class="comment" key="1" v-show="showFontOnImg">
          <marquee v-show="showComment">
            <marquee-item v-for="item in data3" :key="1" class="align-middle">
              <div class="content-p">
                {{item.nickName}}:&nbsp;{{item.content}}
              </div>
            </marquee-item>
          </marquee>
        </div>
        <div class="content" key="2" v-show="showFontOnImg">
          <p class="content-p">{{data2.content}}</p>
        </div>
      </transition-group>
    </div>
    <div style="height: 145px; overflow: auto;">
      <div v-for="item in data4" style="width: 100%;">
        <swipeout class="vux-1px-tb">
          <swipeout-item transition-mode="follow">
            <div slot="right-menu">
              <swipeout-button v-if="item.fromUserId == userId" type="warn" @click.native="deletdComment(item.id)">{{('删除')}}</swipeout-button>
            </div>
            <div slot="content" style="padding:0px;">
              <span style="color: #999999;">{{item.fromName}}:&nbsp;</span>
              <span style="display: inline;" @click="updateDeleteState">{{item.content}}</span>
            </div>
          </swipeout-item>
        </swipeout>
      </div>
      <div style="margin-top: -15px;">
        <group>
          <x-input class="comment-font" v-model="commentContent" placeholder="说些啥" :min="1" :max="21" @on-enter="sendComment" novalidate placeholder-align="left">
            <img slot="label" style="padding-right:10px;display:block;" src="../../static/img/comment.png" width="24" height="24">
            <x-button class="ok-btn" slot="right" type="primary" mini @click.native="sendComment">ok</x-button>
          </x-input>
        </group>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Flexbox,
  FlexboxItem,
  Divider,
  Group,
  Cell,
  Marquee,
  MarqueeItem,
  XInput,
  XButton,
  Popover,
  Swipeout,
  SwipeoutItem,
  SwipeoutButton
} from 'vux'
require('swiper/dist/css/swiper.css')
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'vue2-animate/dist/vue2-animate.min.css'

export default {
  data() {
    return {
      show1: false,
      text1: 'Processing',
      userId: window.localStorage["userId"],
      detailUserId: this.$route.query.detailUserId,
      thoughtId: this.$route.query.thoughtId,
      data1: [], //基本信息
      data2: [], //说说
      data3: [], //大家评论
      showComment: true, //没有评论不显示
      showFontOnImg: true, //图片上是否显示说说和评论
      showWeComment: false, //显示我们的交流
      data4: [], //我和目标的交流
      commentContent: '',
      showDeleteIcon: false,
      hasReward: 0, //拥有的积分
      swiperOption: { //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        // swiper configs 所有的配置同swiper官方api配置
        autoplay: 0,
        direction: 'horizontal',
        grabCursor: false,
        setWrapperSize: true,
        autoHeight: true,
        observeParents: true,
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: false,
      }
    }
  },
  mounted() {
    this.userInfo();
    this.getReward();
    this.getThought();
    this.getOtherComments();
    this.getOurComments();
  },
  methods: {
    userInfo() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/getUserInfo.json",
        params: {
          userId: this.userId,
          detailUserId: this.detailUserId
        },
        successFc: (response) => {
          this.data1 = response.data.data
        }
      });
    },
    getReward() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/getReward.json",
        params: {
          userId: this.userId,
          thoughtId: this.thoughtId
        },
        successFc: (response) => {
          this.hasReward = response.data.data
        }
      });
    },
    getThought() {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/getThought.json",
        params: {
          userId: this.userId,
          thoughtId: this.thoughtId
        },
        successFc: (response) => {
          _that.data2 = response.data.data
        }
      });
    },
    getOtherComments() {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/queryCommentsAll.json",
        params: {
          userId: _that.userId,
          thoughtId: _that.thoughtId,
          toUserId: _that.detailUserId
        },
        successFc: (response) => {
          if (response.data.data) {
            _that.showComment = true
          }
          _that.data3 = response.data.data
        }
      });
    },
    getOurComments() {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/queryWeComments.json",
        params: {
          userId: _that.userId,
          thoughtId: _that.thoughtId,
          toUserId: _that.detailUserId
        },
        successFc: (response) => {
          if (!response.data.data) {
            _that.showWeComment = false
          } else {
            _that.data4 = response.data.data
          }
        }
      });
    },
    clickImg() {
      if (this.showFontOnImg) {
        this.showFontOnImg = false
      } else {
        this.showFontOnImg = true
      }
    },
    sendComment() {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/publicComment.json",
        params: {
          userId: _that.userId,
          thoughtId: _that.thoughtId,
          toUserId: _that.detailUserId,
          content: _that.commentContent
        },
        successFc: (response) => {
          _that.commentContent = ''
          _that.getOurComments();
        }
      });
    },
    updateDeleteState() {
      if (this.showDeleteIcon) {
        this.showDeleteIcon = false
      } else {
        this.showDeleteIcon = true
      }
    },
    deletdComment(commentId) {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/deleteComment.json",
        params: {
          userId: _that.userId,
          thoughtId: _that.thoughtId,
          commentId: commentId
        },
        successFc: (response) => {
          _that.getOurComments();
        }
      });
    },
    reward() {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/reward.json",
        params: {
          userId: _that.userId,
          thoughtId: _that.thoughtId
        },
        successFc: (response) => {
          this.$store.commit('updateToast', '打赏成功');
          this.getReward()
        }
      });
    },
    showPersonHome() {
      this.$router.push({
        path: '/tourl/personHome',
        query: {
          targetUserId: this.detailUserId
        }
      })
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    Divider,
    swiper,
    swiperSlide,
    Marquee,
    MarqueeItem,
    Group,
    Cell,
    XInput,
    XButton,
    Popover,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  }
}

</script>
